<template lang="pug">
el-dialog(
  :visible.sync="show"
  width="566px"
  @open="beforeOpen"
  :before-close="handleClose"
  :close-on-click-modal="false"
  custom-class="member-modal"
)
  .modal-title(slot="title") 添加成员
  .modal-body
    el-form(
      size="small"
      :rules="rules"
      ref="memberForm"
      :model="form"
      label-width="100px"
      label-position="left"
    )
      el-form-item(label="账号" prop="userName")
        el-input(placeholder="请输入账号" v-model="form.userName")
      el-form-item(label="姓名"  prop="nickName")
        el-input(placeholder="请输入姓名" v-model="form.nickName")
      el-form-item(label="手机号"  prop="mobile")
        el-input(placeholder="请输入手机号" v-model="form.mobile")
      el-form-item(label="角色"  prop="roleId")
        el-select(v-model="form.roleId" placeholder="请选择角色")
          el-option(label="管理者", :value="2")
          el-option(label="成员", :value="3")
      el-form-item(label="邮箱"  prop="mail")
        el-input(placeholder="请输入邮箱" v-model="form.mail")
  .modal-footer(slot="footer")
    el-button(size="small" @click="handleClose") 取消
    el-button(size="small" type="primary" @click="save") 保存
</template>

<script>
import { addSupplierMember } from 'api'
import { hex_md5_salt } from 'utils/md5'
export default {
  name: 'createMemberModal',
  props: {
    show: Boolean,
    item: Object
  },
  data () {
    return {
      form: {
        userName: '',
        mobile: '',
        nickName: '',
        roleId: '',
        mail: '',
        password: '',
        userId: ''
      },
      rules: {
        userName: [
          { required: true, message: '请输入账号', trigger: 'blur' }
        ],
        mobile: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { pattern: /^1[3|4|5|7|8|9][0-9]\d{8}$/, message: '手机号格式错误', trigger: 'blur' }
        ],
        nickName: [
          { required: true, message: '请输入姓名', trigger: 'blur' }
        ],
        roleId: [
          { required: true, message: '请选择角色', trigger: 'change' }
        ],
        mail: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          { pattern: /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,5}$/, message: '邮箱格式错误', trigger: 'blur' }
          
        ]
      }
    }
  },
  methods: {
    beforeOpen () {
      if (this.item.userId) {
        this.form = { ...this.form, ...this.item }
      } else {
        this.form = {
          userName: '',
          mobile: '',
          nickName: '',
          roleId: '',
          mail: '',
          password: '',
          userId: ''
        }
      }
    },
    handleClose () {
      this.$emit('close')
    },
    async submit () {
      try {
        await this.$axios.post(addSupplierMember, { content: { ...this.form, password: hex_md5_salt(encodeURIComponent(this.form.mobile)) } })
        this.$message.success('保存成功！')
        this.$emit('confirm')
      } catch (err) {
        console.log(err)
        this.$message.error(err.message || err.ResultSet.errors)
      }
    },
    save () {
      this.$refs.memberForm.validate((valid) => {
        if (valid) this.submit()
      })
    }
  }
} 
</script>

<style type="text/css" lang="scss">
.member-modal {
  .el-dialog__header {
    background: #F3F3F3;
    padding: 20px;
  }
}
</style>

<style lang="scss" scoped>
.modal-title {
  font-size: 16px;
  font-weight: bold;
  color: #363636;
}
.member-modal {
  .el-select {
    width: 100%;
  }
}

</style>
